<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .open {
            width: 100%;
            height: 45px;
            background-color: #333333;
            color: #ffff;
            display: flex;

        }

        .open li {
            list-style: none;
            line-height: 45px;
            text-align: center;
        }

        .open li:nth-child(1) {
            width: 8%;
        }

        .open li:nth-child(1) img {
            width: 10px;
        }

        .open li:nth-child(2) img {
            width: 30px;
        }

        .open li:nth-child(2) {
            width: 10%;
            display: flex;
            align-items: center;
        }

        .open li:nth-child(3) {
            width: 57%;
        }

        .open li:nth-child(4) {
            width: 25%;
            background-color: #F63515;
        }

        .sousuolan {
            background-color: #c82519;
            color: #ffff;
            display: flex;
            width: 100%;
            height: 44px;
            align-items: center;
            justify-content: center;
        }

        .caidan,
        .login {
            width: 40px;
            height: 44px;
        }

        .login {
            line-height: 44px;
            margin-left: 8px;
        }

        .caidan span {
            background: url(images/菜单.png);
            margin: 14px 0 0 15px;
            width: 20px;
            height: 18px;
            display: block;
            background-size: 100% 100%;
        }

        .btn {

            height: 30px;
            background-color: #fff;
            flex: 1;
            border-radius: 15px;
            display: flex;
            align-items: center;
        }

        .jd {
            width: 20px;
            height: 15px;
            background: url(images/jd.png);
            background-size: 20px 15px;
            margin: 8px 8px 0 15px;

        }

        .jingling {
            width: 18px;
            height: 15px;
            background: url(images/精灵图.png);
            background-position: -83px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;

        }

        .xian {
            width: 1px;
            height: 16px;
            background-color: darkgray;
            margin: 7px -4px 7px 0;

        }
        /* 大图 */
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: rgb(197, 24, 24);

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .datu{
            width: 100%;
            
            height: 150px;
        }
        .swiper-slide img{
            width: 95%;
            border-radius: 10px;
        }
        /* 导航 */
    .swiper-container1 {
      width: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      
    }

    .daohang{
        width: 100%;
    }

    a {
      text-decoration: none;
      color: black;
      font-size: 12px;
    }

    .nav {
      width: 100%;
      height: 160px;
      text-align: center;
      list-style: none;
    }

    .nav li {
      width: 20%;
      height: 60px;
      float: left;
    }

    .nav li img {
      width: 60px;
      height: 50px;
    }

    .nav li a span {
      display: block;
    }

    </style>
</head>

<body>
    <!-- 京东打开 -->
    <ul class="open">
        <li><img src="images\close.png" alt="" srcset=""></li>
        <li><img src="images\jingdong.png" alt="" srcset=""></li>
        <li>打开京东APP，购物更轻松</li>
        <li>立即打开</li>
    </ul>
    <!-- 搜索栏 -->
    <div class="sousuolan">
        <div class="caidan"><span></span></div>
        <div class="btn">
            <div class="jd"></div>
            <div class="xian"></div>
            <div class="jingling"></div>
        </div>
        <div class="login">登录</div>
    </div>
    <div class="datu">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/d1.dpg" alt="" srcset=""></div>
                <div class="swiper-slide"><img src="images/d2.jpg" alt="" srcset=""></div>
                <div class="swiper-slide"><img src="images/d3.dpg" alt="" srcset=""></div>
                <div class="swiper-slide"><img src="images/d4.dpg" alt="" srcset=""></div>
                <div class="swiper-slide"><img src="images/d5.dpg" alt="" srcset=""></div>
                <div class="swiper-slide"><img src="images/d6.dpg" alt="" srcset=""></div>
                <div class="swiper-slide"><img src="images/d7.dpg" alt="" srcset=""></div>
               
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <!-- <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div> -->
        </div>

        <!-- Swiper JS -->
        <script src="js/swiper-bundle.min.js"></script>


    </div>
      <!-- 导航栏 -->
      <div class="daohang">
  <div class="swiper-container1">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <ul class="nav">
          <li><a href="#"><img src="images/1.png" alt=""><span>天猫新品</span></a></li>
          <li><a href="#"><img src="images/2.png" alt=""><span>今日爆款</span></a></li>
          <li><a href="#"><img src="images/3.png" alt=""><span>天猫国际</span></a></li>
          <li><a href="#"><img src="images/4.png" alt=""><span>饿了吗</span></a></li>
          <li><a href="#"><img src="images/5.png" alt=""><span>天猫超市</span></a></li>
          <li><a href="#"><img src="images/6.png" alt=""><span>充值中心</span></a></li>
          <li><a href="#"><img src="images/7.png" alt=""><span>机票酒店</span></a></li>
          <li><a href="#"><img src="images/8.png" alt=""><span>金币庄园</span></a></li>
          <li><a href="#"><img src="images/9.png" alt=""><span>阿里拍卖</span></a></li>
          <li><a href="#"><img src="images/10.png" alt=""><span>淘宝吃货</span></a></li>
        </ul>
      </div>
      <div class="swiper-slide">
        <ul class="nav">
          <li><a href="#"><img src="images/11.png" alt=""><span>分类</span></a></li>
          <li><a href="#"><img src="images/12.png" alt=""><span>天猫美食</span></a></li>
          <li><a href="#"><img src="images/13.png" alt=""><span>阿里健康</span></a></li>
          <li><a href="#"><img src="images/14.png" alt=""><span>口碑生活</span></a></li>
          <li><a href="#"><img src="images/15.png" alt=""><span>闲鱼</span></a></li>
          <li><a href="#"><img src="images/16.png" alt=""><span>会员中心</span></a></li>
          <li><a href="#"><img src="images/17.png" alt=""><span>造点新货</span></a></li>
          <li><a href="#"><img src="images/18.png" alt=""><span>土货鲜食</span></a></li>
        </ul>
      </div>
      
    </div>
    <!-- Add Pagination -->
    
  </div>
  <div class="swiper-pagination"></div>
</div>
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
           
        });
        var swiper1 = new Swiper('.swiper-container1', {
            autoplay: {
                delay: 7000,
                disableOnInteraction: false,
            },
            pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
      },
    });
    </script>

</body>

</html>